﻿<%@ Page Culture="auto" UICulture="auto" Title="Tab container and tabs" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="TabPage.aspx.cs" Inherits="BM.Tools.WebControls.MForm.Example.Tabs.TabPage" %>

<%@ Register Assembly="BM.Tools.WebControls.MForm" Namespace="BM.Tools.WebControls.MForm.Controls.Tabs"
    TagPrefix="mf" %>
<%@ Register TagPrefix="mftitle" Namespace="BM.Tools.WebControls.MForm.Controls.Titles" Assembly="BM.Tools.WebControls.MForm" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Description" runat="server">
    <div class="Section">
        <<mftitle:TitleControl runat="server" Text="The Tab container and tabs" />
        <p>            
            The MForm controls provide their own Tab control functionality. 
        </p>
        <p>            
            This functionality is very straightforward and can be used outside MForm item controls.
        </p>
        <p>
            Basically, each tab has a corresponding control associated. The assocciation can be done:
        </p>
        <ul>
            <li>using the <code>TargetControlId</code> property</li>
            <li>or using the <code>TargetControl</code> property</li>
        </ul>
        <p>
            When a tab is clicked, its corresponding control becomes visible. In that same moment, all controls associated with other tabs become invisible.
        </p>
        <p>
            On the server side the <code>TabContainer</code> control may specify which tab should be initially selected.
        </p>
        <p>
            This can be done with the use of the <code>SelectedTabIndex</code> control. The index of the first control is <code>0</code>.
        </p>
    </div>
    <mf:TabContainer ID="TabContainer1" runat="server" SelectedTabIndex="2">
        <mf:Tab Text="First Tab" runat="server" TargetControlId="Panel1" />
        <mf:Tab Text="Second Tab" runat="server" TargetControlId="Panel2" />
        <mf:Tab Text="Login Tab" runat="server" TargetControlId="Login" />
    </mf:TabContainer>
    <asp:Panel ID="Panel1" runat="server">
        Here is the first tab content
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server">
        Here is the second tab content
    </asp:Panel>
    <asp:Login ID="Login" runat="server">
    </asp:Login>
</asp:Content>
